<script setup>
    import {Calendar,View,Search,Star,ChatLineSquare,Download} from '@element-plus/icons-vue'
    import { ref } from 'vue';
    import { useRoute } from 'vue-router';
    import { ElMessage } from 'element-plus';
    // 使用 useRoute 获取当前路由对象
    const route = useRoute();
    // 获取路由参数 id
    const articleId = ref(route.params.id);

    import { onMounted } from 'vue';
    import { getArticleById } from '@/api/article';
    const articleData=ref({})
    async function getArticleFun(){
        const result=await getArticleById(articleId.value)
        if(result.code===1){
            articleData.value=result.data
            console.log(result.data)
        }
        else{
            ElMessage.error(result.msg)
        }
    }

    onMounted(()=>{
        getArticleFun()
        getCommentListFun()
    })

    const likeColor=ref("#747474")

    import { addArticleLike } from '@/api/article';

    async function addArticleLikeFun(){
        const result=await addArticleLike(articleId.value)
        console.log(result)
        if(result.code===1){
            ElMessage.success('点赞成功')
        }
        if(result.code===0){
            ElMessage.error(result.msg)
        }
    }

    import { getCommentList,addComment } from '@/api/comment';
    const commentList_pageIndex=ref(1)
    const commentList_pageSize=ref(10)
    async function getCommentListFun(){
        const result=await getCommentList(articleId.value,commentList_pageIndex.value,commentList_pageSize.value)
        commentList.value=result.data
    }

    const commentList=ref([])
    const comment=ref({
        id:'',
        content:'',
        articleId:'',
        userId:'',
        createdTime:'',
        status:'',
    })

    async function addCommentFun(){
        comment.value.articleId=articleId.value
        const result=await addComment(comment.value)
        console.log(result)
        if(result.code===1){
            ElMessage.success('评论成功')
            comment.value={
                id:'',
                content:'',
                articleId:'',
                userId:'',
                createdTime:'',
                status:'',
            }
            getCommentListFun()
        }
        if(result.code===0){
            ElMessage.error(result.msg)
        }
    }

    const formatDate = (timestamp) => {
      const now = new Date();
      const commentDate = new Date(timestamp);
      const diff = now - commentDate;

      if (diff < 1000) {
        return '刚刚';
      } else if (diff < 60000) {
        return `${Math.floor(diff / 1000)}秒前`;
      } else if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`;
      } else if (diff < 86400000) {
        return `${Math.floor(diff / 3600000)}小时前`;
      } else {
        return `${Math.floor(diff / 86400000)}天前`;
      }
    };
</script>
 
<template>
    <div class="header">
        <div class="header-back">< 返回</div>
    </div>
    <div class="main-page">
        <div class="comment-area">
            <div class="comment-area-items">
                <el-scrollbar>
                    <div class="comment-area-item" v-for="item in commentList">
                        <div class="comment-area-item-info">
                            <div class="comment-area-item-info-image" style="color: #fff;">{{item.userName[0]}}</div>
                            <div>{{item.userName }}</div>
                            <div class="comment-area-item-info-time">{{formatDate(item.createdTime)}}</div>
                        </div>
                        <div class="comment-area-item-center">{{item.content}}</div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="comment-area-input">
                <div class="comment-area-input-text">
                    <el-input placeholder="请输入您的评论内容" v-model="comment.content"></el-input> 
                </div>
                <div>
                    <el-button @click="addCommentFun">发表评论</el-button>
                </div>
            </div>
        </div>
        <div class="article-area">
            <div class="article-title">{{ articleData.title }}</div>
            <div class="article-info">
                <div class="article-info-item">
                    <div class="article-info-item-icon">
                        <el-icon size="16" style="margin: 4px;">
                            <Calendar />
                        </el-icon>
                    </div>
                    <div>
                        {{ articleData.createdTime }}
                    </div>
                </div>
                <div class="article-info-item">
                    <div class="article-info-item-icon">
                        <el-icon size="16" style="margin: 4px;">
                            <View />
                        </el-icon>
                    </div>
                    <div>
                        阅读量 {{ articleData.viewCount }}
                    </div>
                </div>
                <div class="article-info-item">
                    <div class="article-info-item-icon">
                        <el-icon size="16" style="margin: 4px;">
                            <Star />
                        </el-icon>
                    </div>
                    <div>
                        收藏 0
                    </div>
                </div>
                <div class="article-info-item" @mouseenter="likeColor='#409eff'" @mouseleave="likeColor='#747474'" @click="addArticleLikeFun">
                    <div class="article-info-item-icon">
                        <el-icon size="16" style="margin: 4px;">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Like-1--Streamline-Core" height="14" width="14"><desc>Like 1 Streamline Icon: https://streamlinehq.com</desc><g id="like-1--reward-social-up-rating-media-like-thumb-hand"><path id="Union" :fill="likeColor" fill-rule="evenodd" d="M4.41074 12.9614c0.33597 0.1601 0.70344 0.2432 1.07562 0.2432l5.34604 0c1.2317 0 2.2798 -0.897 2.47 -2.1138l0.6259 -4.00329c0.1896 -1.213 -0.7483 -2.30892 -1.976 -2.30892l-3.28374 0 0 -2.35762c0 -0.8976 -0.72765 -1.625248 -1.62525 -1.625248 -0.5883 0 -1.13068 0.317918 -1.41809 0.831238L3.54788 5.33703c-0.12537 0.2239 -0.1912 0.47621 -0.1912 0.73282l0 5.44245c0 0.5783 0.33252 1.1052 0.85463 1.354l0.19943 0.0951ZM1.04363 5.52027c-0.264251 0 -0.517678 0.10497 -0.704531 0.29182 -0.186853 0.18686 -0.2918263 0.44028 -0.2918263 0.70453l5e-7 5.11258c0 0.2643 0.1049728 0.5177 0.2918258 0.7046 0.186852 0.1868 0.440279 0.2918 0.704531 0.2918l0.00021 0 0.49636 -0.0002c0.27606 -0.0001 0.49978 -0.224 0.49978 -0.5l0 -6.10534c0 -0.13265 -0.05271 -0.25986 -0.14652 -0.35363 -0.09382 -0.09378 -0.22105 -0.14643 -0.35369 -0.14637l-0.49614 0.00021Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                        </el-icon>
                    </div>
                    <div>
                        点赞数 {{ articleData.likeCount }}
                    </div>
                </div>
            </div>
            <div class="article-content" v-html="articleData.content">
            </div>
        </div>
    </div>
</template>
 
<style scoped>
.header{
    width: 100vw;
    height: 6vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 444;
    border-bottom: 1px solid rgb(230, 230, 230);
}
.header-back{
    width: 10vw;
    height: 6vh;
    line-height: 6vh;  
    padding:0px 1vw;
    color: rgb(113, 113, 113);
    cursor: pointer;
}
.header-back:hover{
    color: rgb(0, 0, 0);
    font-weight: 600;
}

.main-page{
    width: 100%;
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-top: 8vh;
    display: flex;
    flex-direction: row;
}
.comment-area{
    width: 18vw;
    background-color: #ffffff;
    position: fixed;
    height: 86vh;
    margin:0px 2vw;
    border-radius: 10px;
    padding:2vh 1vw;
}
.article-area{
    width: 70vw;
    padding: 1vw ;
    min-height: 180vh;
    background-color: #fff;
    margin-left: 25vw;
    border-radius: 10px;
    margin-bottom: 6vh;
}
.article-title{
    font-size: 2.5vh;
    height: 5vh;
    line-height: 5vh;
    font-weight: 600;
}
.article-info{
    height: 6vh;
    background-color: rgb(235, 235, 235);
    margin: 0.5vh 0px;
    display: flex;
    flex-direction: row;
}
.article-info>div{
    min-width: 4vw;
    padding: 0px 1vw;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    font-size: 1.5vh;
}
.article-info-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.article-info-item-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.article-info-item:nth-child(3){
    cursor: pointer;
}
.article-info-item:nth-child(4){
    cursor: pointer;
}
.article-info-item:nth-child(3):hover{
    color: #409eff;
    font-weight: 600;
}
.article-info-item:nth-child(4):hover{
    color: #409eff;
    font-weight: 600;
}
.comment-area-items{
    width: 100%;
    height: 80vh;
}
.comment-area-input{
    margin-top: 1vh;
    height: 5vh;
    line-height: 5vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.comment-area-input-text{
    width: 70%;
    margin-right: 4%;
}
.comment-area-item{
    width: 96%;
    min-height: 8vh;
    margin: 10px 0px;
    margin-right: 20px;
}
.comment-area-item-info{
    height: 5vh;
    display: flex;
    flex-direction: row;
    line-height: 5vh;
}
.comment-area-item-info-image{
    height: 5vh;
    width: 5vh;
    line-height: 5vh;
    text-align: center;
    background-color: #409eff;
    border-radius: 2.5vh;
    margin: 0px 2px;
    margin-right: 6px;
}
.comment-area-item-info-time{
    flex: 1;
    text-align: right;
    color: rgb(142, 142, 142);
}
.comment-area-item-center {
  display: flex;
  flex-direction: row;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 10px; /* 添加间距 */
  padding-bottom: 6px;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.comment-area-item-center > div {
  max-width: 100%; /* 确保子元素宽度不超过父容器 */
}
</style>